<template>
  <div id="lab-list">
    <div class="title mb-10">
      <Divider style="margin-top: 10px;">
        <h3 style="color: #17233d;">
          {{ title }}
        </h3>
      </Divider>
    </div>
    <div class="top-toolbar pr-10 pl-10">
      <Row v-if="userAccess.indexOf('ROLE_INSTITUTE_ADMIN') > -1 || userAccess.indexOf('ROLE_SCHOOL_ADMIN') > -1 || userAccess.indexOf('ROLE_ROOT') > -1">
        <Col :xs="24" :sm="24" :md="11" :lg="7" class="mb-15">
          <span>学院：</span>
          <div style="display: inline-block;width: calc(100% - 42px);">
            <Select
              v-if="userAccess.indexOf('ROLE_SCHOOL_ADMIN') > -1 || userAccess.indexOf('ROLE_ROOT') > -1"
              :size="selectSize" v-model="filter.institutes"
              :enabledPreventOverflow="enabledPreventOverflow"
              placeholder="请选择学院进行检索" filterable>
              <Option v-for="(item, index) in options.institutes" :value="item" :key="index">{{ item }}</Option>
            </Select>
            <Input v-else v-model="filter.institutes" readonly placeholder="当前学院" />
          </div>
        </Col>
        <Col :xs="24" :sm="24" :md="{span: 11, offset: 1}" :lg="{span: 6, offset: 1}" class="mb-15">
          <span>状态：</span>
          <div style="display: inline-block;width: calc(100% - 42px);">
            <Select :size="selectSize" v-model="filter.status" :enabledPreventOverflow="enabledPreventOverflow" placeholder="请选择状态进行检索" filterable>
              <Option value="all" key="all">全部</Option>
              <Option value="ACTIVATING" key="ACTIVATING">可用</Option>
              <Option value="UNACTIVATED" key="UNACTIVATED">禁用</Option>
            </Select>
          </div>
        </Col>
        <Col :xs="24" :sm="24" :md="{span: 11}" :lg="{span: 9, offset: 1}" class="mb-15">
          <Input v-model="search.keyword"
                 search
                 clearable
                 :disabled="!search.criteria"
                 :placeholder="inputPlaceholder"
                 @on-search="onSearch"
                 @on-change="onInputChange">
            <Select slot="prepend"
                    style="width: 110px;"
                    :size="selectSize"
                    v-model="search.criteria"
                    :enabledPreventOverflow="enabledPreventOverflow"
                    placeholder="搜索条件"
                    filterable
                    clearable
                    @on-change="onChangeSearchCriteria">
              <Option value="teacherName" key="teacherName">负责人姓名</Option>
              <Option value="teacherCode" key="teacherCode">负责人工号</Option>
              <Option value="name" key="name">实验室名称</Option>
              <Option value="code" key="code">实验室房号</Option>
            </Select>
          </Input>
        </Col>
      </Row>
      <Row type="flex">
        <Col :xs="24" :sm="24" :md="12" :lg="12">
          <Button type="info" @click="addLab" class="mb-15">
            <font-awesome-icon icon="plus-circle"/>
            添加实验室
          </Button>
          <Divider type="vertical" class="mb-15"/>
          <Button type="success" @click="batchEnable" class="mb-15" :disabled="table.selection.length === 0">
            <font-awesome-icon icon="check-circle"/>
            批量启用
          </Button>
          <Divider type="vertical" class="mb-15"/>
          <Button type="error" @click="batchDisable" class="mb-15" :disabled="table.selection.length === 0">
            <font-awesome-icon icon="minus-circle"/>
            批量禁用
          </Button>
        </Col>
      </Row>
    </div>
    <div class="table-container small-table">
      <Table :border="table.showBorder"
             :stripe="table.showStripe"
             :show-header="table.showHeader"
             :height="table.fixedHeader ? table.height : ''"
             :size="table.size"
             :data="table.data"
             :columns="table.columns"
             :loading="table.loading"
             :disabledHover="table.disabledHover"
             :highlight-row="table.highlightRow"
             @on-sort-change="onSortChange"
             @on-selection-change="onSelectionChange">
        <template slot-scope="{ row, index }" slot="action">
          <div style="padding-top: 5px; padding-bottom: 5px;">
            <Button type="primary" :size="btnSize" @click="edit(row)">
              <font-awesome-icon icon="edit"/>
              修改
            </Button>
            <Button v-if="row.status === 'ACTIVATING'" type="dashed" :size="btnSize" class="mt-10" @click="disable(row)">
              <font-awesome-icon icon="ban"/>
              禁用
            </Button>
            <Button v-else type="success" :size="btnSize" class="mt-10" @click="enable(row)">
              <font-awesome-icon icon="dot-circle"/>
              启用
            </Button>
          </div>
        </template>
      </Table>
    </div>
    <div class="pagination text-right pr-15 mt-20">
      <Page :current="pageBuilder.pageNum"
            :size="page.size"
            :total="page.total"
            :page-size="page.pageSize"
            :page-size-opts="page.pageSizeOpts"
            :show-sizer="page.showSizer"
            :simple="page.simple"
            :show-elevator="page.showElevator"
            :show-total="page.showTotal"
            @on-change="onPageNumChange"
            @on-page-size-change="onPageSizeChange"/>
    </div>
    <div class="modal-container">
      <Modal v-model="modal.disable.show" :closable="modal.disable.closable" :mask-closable="modal.disable.maskClosable" width="360" class-name="vertical-center-modal">
        <p slot="header" style="color: #FF5722; text-align: center;">
          <font-awesome-icon icon="info-circle"/>
          禁用确认
        </p>
        <div style="text-align: center;">
          <p>
            <span>确认禁用【</span>
            <span v-for="(item, index) in table.selectedRows" :key="index">
              <span>{{ item.name }}{{ item.code }}</span>
              <span v-if="index !== table.selectedRows.length - 1">、</span>
            </span>
            <span>】吗？</span>
          </p>
        </div>
        <div slot="footer">
          <Button type="error" size="large" long :loading="modal.disable.loading" @click="confirmDisable">禁用</Button>
        </div>
      </Modal>
      <Modal v-model="modal.enable.show" :closable="modal.enable.closable" :mask-closable="modal.enable.maskClosable" width="360" class-name="vertical-center-modal">
        <p slot="header" style="color: #4CAF50; text-align: center;">
          <font-awesome-icon icon="info-circle"/>
          启用确认
        </p>
        <div style="text-align: center;">
          <p>
            <span>确认启用【</span>
            <span v-for="(item, index) in table.selectedRows" :key="index">
              <span>{{ item.name }}{{ item.code }}</span>
              <span v-if="index !== table.selectedRows.length - 1">、</span>
            </span>
            <span>】吗？</span>
          </p>
        </div>
        <div slot="footer">
          <Button type="success" size="large" long :loading="modal.enable.loading" @click="confirmEnable">启用</Button>
        </div>
      </Modal>
      <Modal width='820'
             class="height-80-modal"
             v-model="modal.save.show"
             :fullscreen="modal.save.isFullScreen"
             :mask-closable="false"
             footer-hide @on-ok="modal.save.show = false"
             @on-cancel="closeSaveModal"
             class-name="vertical-center-modal">
        <p slot="header" class="text-center">{{ modal.save.title }}</p>
        <div>
          <lab-save
            v-if="modal.save.show"
            :labId="modal.save.id"
            :isModified="modal.save.isModified"
            :oriTeacherName="modal.save.teacherName"
            v-on:failFillFrom="failFillFrom"
            v-on:saveSuccess="saveSuccess"
          ></lab-save>
        </div>
      </Modal>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import LabSave from '_c/lab-save/lab-save'
import { getInstituteList, getLabList, updateLabStatus } from '@/api/lab-mgmt'
import { activeTableMove } from '@/libs/tools'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faEdit, faPlusCircle, faBan, faDotCircle, faMinusCircle, faCheckCircle, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
library.add(faEdit)
library.add(faBan)
library.add(faDotCircle)
library.add(faPlusCircle)
library.add(faMinusCircle)
library.add(faCheckCircle)
library.add(faInfoCircle)
export default {
  name: 'LabList',
  components: {
    'lab-save': LabSave
  },
  data () {
    return {
      firstEnter: false,
      title: '实验室列表',
      btnSize: 'small',
      selectSize: 'default',
      enabledPreventOverflow: false,
      search: {
        criteria: '',
        keyword: ''
      },
      filter: {
        institutes: '',
        teacherName: '',
        teacherCode: '',
        name: '',
        code: '',
        status: 'all'
      },
      userAccess: [],
      institute: '',
      options: {
        institutes: []
      },
      table: {
        showBorder: true,
        showStripe: false,
        showHeader: true,
        fixedHeader: true,
        height: '',
        sortableColumns: [],
        disabledHover: false,
        highlightRow: false,
        loading: false,
        size: 'small',
        selection: [],
        currRowIndex: '',
        columns: [{
          type: 'selection',
          width: 40,
          align: 'center'
        }, {
          type: 'index',
          title: '序号',
          width: 50,
          align: 'center'
        }, {
          title: '学院',
          key: 'institute',
          minWidth: 120,
          align: 'center'
          // ,filters: undefined,
          // filterRemote: function (value) {
          //   this.filter.institutes = value.length <= 0 ? [] : value
          //   // 动态设置筛选列的filteredValue，防止iview表格点击列排序时把filters清空（显示上）
          //   this.getTableColumnByKey('institute')[0].filteredValue = this.filter.institutes
          //   if (this.filter.institutes.length > 0) {
          //     this.getTableColumnByKey('institute')[0].filteredValue = this.filter.institutes
          //   } else {
          //     delete this.getTableColumnByKey('institute')[0].filteredValue
          //   }
          // },
          // filterMultiple: true
        }, {
          title: '实验室',
          align: 'center',
          children: [{
            title: '名称',
            key: 'name',
            minWidth: 120,
            align: 'center'
          }, {
            title: '房间号',
            key: 'code',
            width: 80,
            align: 'center'
          }, {
            title: '负责人',
            align: 'center',
            children: [{
              title: '姓名',
              key: 'teacherName',
              width: 70,
              align: 'center'
            }, {
              title: '工号',
              key: 'teacherCode',
              width: 100,
              align: 'center'
            }]
          }, {
            title: '方向',
            minWidth: 120,
            align: 'center',
            render: (h, params) => {
              return h('span', params.row.field ? params.row.field : '/')
            }
          }, {
            title: '容纳人数',
            key: 'capacity',
            width: 80,
            align: 'center',
            sortType: 'normal',
            sortable: 'custom',
            sortMethod: (a, b, type) => {
            },
            render: (h, params) => {
              return h('span', params.row.capacity === null || params.row.capacity === '' ? '/' : params.row.capacity)
            }
          }, {
            title: '电脑数',
            key: 'numOfPC',
            width: 65,
            align: 'center',
            sortType: 'normal',
            sortable: 'custom',
            sortMethod: (a, b, type) => {
            },
            render: (h, params) => {
              return h('span', params.row.numOfPC === null || params.row.numOfPC === '' ? '/' : params.row.numOfPC)
            }
          }, {
            title: '实验箱数',
            key: 'numOfExpBox',
            width: 80,
            align: 'center',
            sortType: 'normal',
            sortable: 'custom',
            sortMethod: (a, b, type) => {
            },
            render: (h, params) => {
              return h('span', params.row.numOfExpBox === null || params.row.numOfExpBox === '' ? '/' : params.row.numOfExpBox)
            }
          }, {
            title: '状态',
            key: 'status',
            width: 90,
            align: 'center',
            // filters: [{
            //   label: '可用',
            //   value: 'ACTIVATING'
            // }, {
            //   label: '禁用',
            //   value: 'UNACTIVATED'
            // }],
            // filterMultiple: false,
            // filterRemote: function (value) {
            //   this.filter.status = value.length <= 0 ? '' : value[0]
            //   if (this.filter.status) {
            //     this.getTableColumnByKey('status')[0].filteredValue = [this.filter.status]
            //   } else {
            //     delete this.getTableColumnByKey('status')[0].filteredValue
            //   }
            // },
            render: (h, params) => {
              const row = params.row
              const color = row.status === 'ACTIVATING' ? 'success' : 'warning'
              const text = row.status === 'ACTIVATING' ? '可用' : '禁用'
              return h('Tag', {
                props: {
                  color: color,
                  type: 'dot'
                }
              }, text)
            }
          }, {
            title: '总面积',
            key: 'area',
            width: 70,
            align: 'center',
            render: (h, params) => {
              return params.row.area ? h('div', [
                params.row.area,
                h('span', 'm'),
                h('sup', '2')
              ]) : h('span', '/')
            }
          }, {
            title: '每生占有标准面积',
            key: 'perStudentArea',
            width: 70,
            align: 'center',
            render: (h, params) => {
              return params.row.perStudentArea ? h('div', [
                params.row.perStudentArea,
                h('span', 'm'),
                h('sup', '2')
              ]) : h('span', '/')
            }
          }, {
            title: '额定课时数(每学期)',
            key: 'ratedClassHours',
            width: 70,
            align: 'center',
            render: (h, params) => {
              return h('span', params.row.ratedClassHours ? params.row.ratedClassHours + '小时' : '/')
            }
          }, {
            title: '创建时间',
            key: 'createDate',
            width: 80,
            align: 'center',
            sortType: 'normal',
            sortable: 'custom',
            sortMethod: (a, b, type) => {
            }
          }]
        }, {
          title: '操作',
          slot: 'action',
          width: 80,
          align: 'center',
          fixed: 'right'
        }],
        data: [],
        selectedRows: []
      },
      page: {
        size: 'small',
        total: 0,
        pageSize: 10,
        showSizer: true,
        showElevator: true,
        showTotal: true,
        pageSizeOpts: [5, 10, 20, 30, 40, 50],
        simple: false
      },
      pageBuilder: {
        pageSize: 10,
        pageNum: 1,
        order: []
      },
      pageBuilderOrder: new Map(),
      /*
       * vue的响应式系统不支持Map和Set,
       * 当Map与Set里面的元素变化时，
       * Vue追踪不到这些变化，无法做出响应
       * 解决方法是用一个可序列化的变量来手动追踪变化
       */
      pageBuilderOrderChangeTracker: 1,
      modal: {
        save: {
          show: false,
          title: '新增实验室',
          isFullScreen: false,
          id: null,
          isModified: true,
          teacherName: null
        },
        disable: {
          loading: false,
          show: false,
          closable: true,
          maskClosable: true
        },
        enable: {
          loading: false,
          show: false,
          closable: true,
          maskClosable: true
        }
      }
    }
  },
  computed: {
    // 搜索输入框的placeholder
    inputPlaceholder () {
      let placeholder = ''
      switch (this.search.criteria) {
        case 'teacherName':
          placeholder = '请输入负责人姓名进行搜索...'
          break
        case 'teacherCode':
          placeholder = '请输入负责人工号进行搜索...'
          break
        case 'name':
          placeholder = '请输入实验室名称进行搜索...'
          break
        case 'code':
          placeholder = '请输入实验室房号进行搜索...'
          break
        default:
          placeholder = '请先选择搜索条件'
          break
      }
      return placeholder
    }
  },
  methods: {
    ...mapActions([
      'getUserInfo'
    ]),
    async renderTable (filter, pageBuilder) {
      // 初始化表格
      this.table.loading = true
      try {
        let response = await getLabList(filter, pageBuilder)
        let res = response.data
        if (res.code === 1) {
          this.table.data = res.data.content
          this.page.total = res.data.totalElements
          this.$nextTick(() => {
            this.table.loading = false
          })
        } else {
          this.table.loading = false
          this.table.data = []
          this.$Notice.error({
            title: '列表加载失败',
            desc: '实验室列表加载失败！' + res.info + '请重试！'
          })
        }
      } catch (error) {
        this.table.loading = false
        this.table.data = []
        this.$Notice.error({
          title: '列表加载失败',
          desc: '实验室列表加载失败！请重试！'
        })
        console.log(error)
      }
    },
    // 添加实验室
    addLab () {
      this.modal.save = Object.assign(this.modal.save, {
        show: true,
        title: '新增实验室',
        id: null,
        isModified: false,
        teacherName: null
      })
    },
    // 修改实验室信息
    edit (row) {
      this.modal.save = Object.assign(this.modal.save, {
        show: true,
        title: '修改实验室信息',
        id: row.id,
        isModified: true,
        teacherName: row.teacherName
      })
    },
    // 修改实验室填充表单失败
    failFillFrom (info) {
      this.modal.save.show = false
      this.$Notice.error({
        title: '获取实验室信息失败，请稍后重试',
        desc: info
      })
    },
    // 成功 新增 / 修改 实验室
    saveSuccess (isModified) {
      this.modal.save.show = false
      this.$nextTick(() => {
        this.$Notice.success({
          title: '提交成功',
          desc: isModified ? '修改实验室信息成功' : '新增实验室成功'
        })
        if (isModified) {
          // 从当前状态重新加载表格
          this.renderTable(this.filter, this.pageBuilder)
        } else {
          this.$emit('refresh')
        }
      })
    },
    // 启用实验室
    enable (row) {
      this.modal.enable.show = true
      this.table.selectedRows = [row]
    },
    // 批量启用实验室
    batchEnable () {
      if (this.table.selection.length <= 0) {
        this.$Notice.warning({
          title: '提示',
          desc: '请先选择需要批量启用的实验室！'
        })
      } else {
        this.table.selectedRows = this.table.selection
        this.modal.enable.show = true
      }
    },
    // 确认启用
    confirmEnable () {
      this.modal.enable.loading = true
      this.modal.enable.closable = false
      this.modal.enable.maskClosable = false
      updateLabStatus(this.table.selectedRows.map(item => {
        return item.id
      }), 'ACTIVATING').then(response => {
        let res = response.data
        this.modal.enable.loading = false
        this.modal.enable.show = false
        this.modal.enable.closable = true
        this.modal.enable.maskClosable = true
        if (res.code === 1) {
          this.$Notice.success({
            title: '启用成功',
            desc: '启用所选的实验室成功！'
          })
          // 从当前状态重新加载表格
          this.renderTable(this.filter, this.pageBuilder)
        } else {
          this.$Notice.error({
            title: '启用失败',
            desc: '启用所选的实验室失败！' + res.info + '请重试！'
          })
        }
      }).catch(err => {
        console.log(err)
        this.modal.enable.loading = false
        this.modal.enable.show = false
        this.modal.enable.closable = true
        this.modal.enable.maskClosable = true
        this.$Notice.error({
          title: '启用失败',
          desc: '启用所选的实验室失败！请重试！'
        })
      })
    },
    // 禁用实验室
    disable (row) {
      this.modal.disable.show = true
      this.table.selectedRows = [row]
    },
    // 批量禁用实验室
    batchDisable () {
      if (this.table.selection.length <= 0) {
        this.$Notice.warning({
          title: '提示',
          desc: '请先选择需要批量禁用的实验室！'
        })
      } else {
        this.table.selectedRows = this.table.selection
        this.modal.disable.show = true
      }
    },
    // 确认禁用
    confirmDisable () {
      this.modal.disable.loading = true
      this.modal.disable.closable = false
      this.modal.disable.maskClosable = false
      updateLabStatus(this.table.selectedRows.map(item => {
        return item.id
      }), 'UNACTIVATED').then(response => {
        let res = response.data
        this.modal.disable.loading = false
        this.modal.disable.show = false
        this.modal.disable.closable = true
        this.modal.disable.maskClosable = true
        if (res.code === 1) {
          this.$Notice.success({
            title: '禁用成功',
            desc: '禁用所选的实验室成功！'
          })
          // 从当前状态重新加载表格
          this.renderTable(this.filter, this.pageBuilder)
        } else {
          this.$Notice.error({
            title: '禁用失败',
            desc: '禁用所选的实验室失败！' + res.info + '请重试！'
          })
        }
      }).catch(err => {
        console.log(err)
        this.modal.disable.loading = false
        this.modal.disable.show = false
        this.modal.disable.closable = true
        this.modal.disable.maskClosable = true
        this.$Notice.error({
          title: '禁用失败',
          desc: '禁用所选的实验室失败！请重试！'
        })
      })
    },
    // 选择搜索条件后触发
    onChangeSearchCriteria (value) {
      this.search.keyword = ''
      this.filter.teacherName = ''
      this.filter.teacherCode = ''
      this.filter.name = ''
      this.filter.code = ''
      this.search.criteria = value
    },
    // 输入框点击搜索或按下回车键时触发
    onSearch (value) {
      this.filter.teacherName = ''
      this.filter.teacherCode = ''
      this.filter.name = ''
      this.filter.code = ''
      if (this.search.keyword.replace(/(^\s*)|(\s*$)/g, '').length <= 0) {
        // this.$Message.warning({
        //   content: '搜索的关键字不能为空！',
        //   closable: true
        // })
        this.$Notice.warning({
          title: '提示',
          desc: '搜索的关键字不能为空！'
        })
      } else {
        this.search.keyword = this.search.keyword.replace(/(^\s*)|(\s*$)/g, '')
        this.filter[this.search.criteria] = this.search.keyword
      }
    },
    // 输入框数据改变时触发
    onInputChange (value) {
      this.filter.teacherName = ''
      this.filter.teacherCode = ''
      this.filter.name = ''
      this.filter.code = ''
      if (this.search.keyword.replace(/(^\s*)|(\s*$)/g, '').length <= 0) {
        this.$Notice.warning({
          title: '提示',
          desc: '搜索的关键字不能为空！'
        })
      } else {
        this.search.keyword = this.search.keyword.replace(/(^\s*)|(\s*$)/g, '')
        this.filter[this.search.criteria] = this.search.keyword
      }
    },
    // 排序时有效，当点击排序时触发
    onSortChange (column) {
      this.pageBuilderOrder.set(column.key, column.order)
      this.pageBuilderOrderChangeTracker++
    },
    // 在多选模式下有效，只要选中项发生变化时就会触发
    onSelectionChange (selection) {
      this.table.selection = selection
    },
    // 页码改变的回调，返回改变后的页码
    onPageNumChange (value) {
      this.pageBuilder.pageNum = value
    },
    // 切换每页条数时的回调，返回切换后的每页条数
    onPageSizeChange (value) {
      this.pageBuilder.pageNum = 1
      this.pageBuilder.pageSize = value
    },
    // 动态获取所有的表格可排序列
    getSortableColumns (columns) {
      let sortableColumns = []
      columns.forEach(item => {
        if (item.sortable) {
          sortableColumns.push(item)
        }
        if (item.children && item.children.length > 0) {
          sortableColumns = sortableColumns.concat(this.getSortableColumns(item.children))
        }
      })
      return sortableColumns
    },
    // 关闭 新增 / 修改 实验室的Modal的回调函数
    closeSaveModal () {
      this.modal.save.isModified = true
      this.$nextTick(() => {
        // 全局配置notice组件的属性
        this.$Notice.config({
          top: window.innerHeight / 3
        })
      })
    },
    // 动态获取所有的表格列
    getTableColumns (columns) {
      let tableColumns = []
      columns.forEach(item => {
        if (!item.children) {
          tableColumns.push(item)
        }
        if (item.children && item.children.length > 0) {
          tableColumns = tableColumns.concat(this.getTableColumns(item.children))
        }
      })
      return tableColumns
    },
    // 根据key动态获取表格列
    getTableColumnByKey (key) {
      return this.getTableColumns(this.table.columns).filter(item => {
        return item.key === key
      })
    }
  },
  created () {
    this.firstEnter = true
    // 全局配置notice组件的属性
    this.$Notice.config({
      top: window.innerHeight / 3
    })
    this.getUserInfo().then(response => {
      let res = response.data
      if (res.code === 1) {
        res = res.data
        this.userAccess = res.roles || []
        this.institute = res.department || ''
        this.filter.institutes = this.institute || ''
        if ((this.userAccess.indexOf('ROLE_SCHOOL_ADMIN') > -1 || this.userAccess.indexOf('ROLE_ROOT') > -1) && res.department) {
          // 获取所有学院
          // getInstituteList().then(response => {
          //   let res = response.data
          //   if (res.code === 1) {
          //     // *动态设置表格列（学院）的filters筛选条件
          //     if (res.data && res.data.length > 0) {
          //       this.table.columns.slice(2, 3)[0].filters = res.data.map(item => {
          //         return {
          //           label: item,
          //           value: item
          //         }
          //       })
          //       this.table.columns.slice(2, 3)[0].filteredValue = this.filter.institutes
          //     } else {
          //       this.table.columns.slice(2, 3)[0].filters = undefined
          //     }
          //   } else {
          //     this.table.columns.slice(2, 3)[0].filters = undefined
          //     this.$Notice.error({
          //       title: '获取列表失败',
          //       desc: '获取学院列表失败！' + res.info + '请重试！'
          //     })
          //   }
          // }).catch(err => {
          //   this.table.columns.slice(2, 3)[0].filters = undefined
          //   this.$Notice.error({
          //     title: '获取列表失败',
          //     desc: '获取学院列表失败！请重试！'
          //   })
          //   console.log(err)
          // })
          // 获取所有学院
          getInstituteList().then(response => {
            let res = response.data
            if (res.code === 1) {
              this.options.institutes = res.data.length > 0 ? res.data : []
            } else {
              this.$Notice.error({
                title: '获取列表失败',
                desc: '获取学院列表失败！' + res.info
              })
            }
          }).catch(err => {
            this.$Notice.error({
              title: '获取列表失败',
              desc: '获取学院列表失败！'
            })
            console.log(err)
          })
        }
      } else {
        this.$Notice.error({
          title: '获取信息失败',
          desc: '获取用户信息失败！' + res.info + '请重试！'
        })
      }
    }).catch(err => {
      this.$Notice.error({
        title: '获取信息失败',
        desc: '获取用户信息失败！请重试！'
      })
      console.log(err)
    })
  },
  mounted () {
    this.$nextTick(() => {
      activeTableMove(document.querySelector('#lab-list .ivu-table-body'))
    })
  },
  activated () {
    if (!this.firstEnter) {
      // 全局配置notice组件的属性
      this.$Notice.config({
        top: window.innerHeight / 3
      })
    }
  },
  deactivated () {
    this.firstEnter = false
    this.$Notice.destroy()
  },
  beforeDestroy () {
    this.$Notice.destroy()
  },
  watch: {
    filter: {
      handler: function (value) {
        this.pageBuilder.pageNum === 1 ? this.renderTable(value, this.pageBuilder) : this.pageBuilder.pageNum = 1
      },
      deep: true
    },
    pageBuilder: {
      handler: function (value) {
        this.renderTable(this.filter, value)
      },
      deep: true
    },
    'pageBuilder.order': function (value) {
      // iview table 默认只支持单列排序，
      // 除了调用接口进行远程排序外，
      // 还要动态设置表格列的sortType，
      // 实现样式上的显示
      if (!this.table.sortableColumns || this.table.sortableColumns.length <= 0) {
        this.table.sortableColumns = this.getSortableColumns(this.table.columns)
      }
      value.forEach(v => {
        let column = this.table.sortableColumns.filter(item => {
          return item.key === Object.keys(v)[0]
        })
        if (column && column.length > 0) {
          column[0].sortType = v[column[0].key]
        }
      })
    },
    pageBuilderOrderChangeTracker () {
      let tempArray = []
      this.pageBuilderOrder.forEach((value, key, map) => {
        if (value) {
          let obj = {}
          obj[key] = value
          tempArray = tempArray.concat([obj])
        }
      })
      this.pageBuilder.order = tempArray
    }
  }
}
</script>

<style lang="less">
  .vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal{
      top: 0;
    }
  }
  .height-80-modal {
    .ivu-modal {
      height: 80%;
      .ivu-modal-content {
        height: 100%;
        .ivu-modal-body {
          height: ~"calc(100% - 52px)";
          overflow-y: auto;
        }
      }
    }
  }
</style>
